<!-- 关系标签表单 -->
<template>
  <a-modal
    v-model:open="visibleModal"
    centered
    width="416px"
    :title="title"
    :mask-closable="false"
    :body-style="{ maxHeight: '460px', overflow: 'auto', paddingBottom: '18px' }"
    class="entity-label-form"
    destroy-on-close
    @ok="handleOk"
    @cancel="resetForm"
  >
    <a-spin :spinning="mainLoading" tip="数据加载中">
      <div v-if="labelInfo" class="entity-label-info">
        <i class="iconfont icon-information-fill"></i>
        <p>{{ labelInfo }}</p>
      </div>
      <a-form ref="formRef" :model="formState" layout="vertical" :colon="false" name="basic" class="form my-scrollbar" :rules="rules">
        <a-form-item label="标签名称" name="name" class="form-item">
          <a-input v-model:value="formState.name" v-trim :maxlength="200" placeholder="请输入标签名称" @keydown.stop="" />
        </a-form-item>
        <a-form-item v-if="title !== '编辑关系标签'" label="起始标签" name="startLabel" class="form-item">
          <a-select v-model:value="formState.startLabel" style="width: 100%" placeholder="请选择">
            <a-select-option v-for="item in options" :key="item.id" :disabled="formState.endLabel === item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="title !== '编辑关系标签'" label="终止标签" name="endLabel" class="form-item">
          <a-select v-model:value="formState.endLabel" style="width: 100%" placeholder="请选择">
            <a-select-option v-for="item in options" :key="item.id" :disabled="formState.startLabel === item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
    <template #footer>
      <a-button key="back" @click="closeModal">取消</a-button>
      <a-button v-if="showContinue" key="back" :loading="continueLoading" :disabled="okLoading" @click="continueToCreate">
        继续创建
      </a-button>
      <a-button key="submit" type="primary" :loading="okLoading" :disabled="continueLoading" @click="handleOk">确定</a-button>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
  import { Rule } from 'ant-design-vue/lib/form'
  import { cloneDeep, validateBitLen } from 'g6-fn'
  import { ref } from 'vue'

  import { textLabelTagApi } from '@/services/index'
  import { validateDirName } from '@/utils'

  import { MarkTaskLabelRes } from './LabelCard/types'

  const emits = defineEmits<{
    (key: 'update:open', value: boolean): void
    (key: 'onSubmit', value: any, isContinue: boolean): void
  }>()

  export interface Props {
    title?: string
    labelInfo?: string
    showContinue?: boolean
  }

  withDefaults(defineProps<Props>(), {
    title: '',
    labelInfo: '',
    showContinue: false,
    okBtnLoading: false
  })

  const visibleModal = ref<boolean>(false)
  const mainLoading = ref<boolean>(false)
  const okLoading = ref<boolean>(false)
  const continueLoading = ref<boolean>(false)

  const formRef = ref()
  const formState = ref({
    name: undefined,
    startLabel: undefined,
    endLabel: undefined
  })

  const rules: Record<string, Rule[]> = {
    name: [
      { required: true, message: '请输入标签名称', trigger: 'change' },
      { validator: validateDirName() },
      { validator: validateBitLen(200), trigger: 'change' }
    ],
    startLabel: [{ required: true, message: '请选择起始标签', trigger: 'change' }],
    endLabel: [{ required: true, message: '请选择终止标签', trigger: 'change' }]
  }

  const options = ref<MarkTaskLabelRes[]>([])
  const getEntityLabelOptions = async (params: any) => {
    try {
      mainLoading.value = true
      const res = await textLabelTagApi.entityList({
        ...params
      })
      options.value = res.data
    } catch (error) {
    } finally {
      mainLoading.value = false
    }
  }

  // 提交
  const handleOk = async () => {
    await formRef.value.validateFields()
    okLoading.value = true
    emits('onSubmit', formState.value, false)
  }

  // 继续创建
  const continueToCreate = async () => {
    await formRef.value.validateFields()
    continueLoading.value = true
    emits('onSubmit', formState.value, true)
  }

  // 设置表单
  const setForm = (data: any) => {
    formState.value = cloneDeep(data)
  }

  // 重置表单
  const resetForm = () => {
    formRef.value?.resetFields()
    formState.value.name = undefined
    formState.value.startLabel = undefined
    formState.value.endLabel = undefined
  }

  // 打开弹窗
  const openModal = (formState?: any) => {
    visibleModal.value = true
    formState && setForm(formState)
    getEntityLabelOptions({ taskId: formState.taskId })
  }

  // 关闭弹窗
  const closeModal = () => {
    resetForm()
    visibleModal.value = false
  }

  // 改变loading状态
  const hideLoading = () => {
    continueLoading.value = false
    okLoading.value = false
  }

  defineExpose({
    open: openModal,
    close: closeModal,
    hideLoading,
    resetForm,
    setForm
  })
</script>

<style lang="less">
  @import '@/styles/mixins.less';

  .entity-label-form {
    .ant-modal-body {
      padding-bottom: 0 !important;
      .my-scrollbar();
    }
  }
</style>

<style lang="less" scoped>
  @import '@/styles/mixins.less';

  :deep(.ant-form-item-label > label) {
    width: 76px;
    font-size: 14px;
    color: @text02;
    font-weight: 400;
    line-height: 22px;
  }

  :deep(.form-item-attr .ant-form-item-label > label) {
    font-weight: 700;
    width: 256px;
  }

  .entity-label-info {
    display: flex;
    margin-bottom: 8px;
    font-size: 14px;
    color: @text03;
    gap: 0 8px;
    font-weight: 400;
    line-height: 22px;
  }

  .form-item-attr {
    margin-bottom: 0;
  }

  .form {
    width: 100%;

    .ant-form-item {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
